<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>表格的基本使用</title>
    <link href="../layui/css/layui.css" rel="stylesheet">
</head>
<body>
<!--头部工具栏模板-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-sm layui-bg-red" lay-event="batchDelete">批量删除</button>
    </div>
</script>
<!--行工具栏模板-->
<script type="text/html" id="barDemo">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs layui-bg-red" lay-event="delete">删除</a>
    </div>
</script>

<table class="layui-hide" id="tableData"></table>

<!--<table border="1px" id="tableData">-->
<!--    <thead>-->
<!--    <tr>-->
<!--        <th>姓名</th>-->
<!--        <th>年龄</th>-->
<!--        <th>性别</th>-->
<!--    </tr>-->
<!--    </thead>-->
<!--    <tbody id="tb">-->
<!--    </tbody>-->
<!--</table>-->


<script src="../layui/layui.js"></script>

<script>

    layui.use('table', function () {
        let table = layui.table;
        let layer = layui.layer;
        // 已知数据渲染
        let inst = table.render({
            elem: '#tableData',  // 获取表格标签
            url: "users.json",   //  后续可以配置成后台的接口  只需按照特定的格式返回数据即可 /user/page  =>{code,message,data,count}
            toolbar: '#toolbarDemo',
            cols: [[ //标题栏
                {checkbox: true, fixed: true},
                {field: 'id', title: 'ID', width: 180, sort: true},
                {field: 'username', title: '用户', width: 120},
                {field: 'sign', title: '签名', minWidth: 160},
                {field: 'sex', title: '性别', width: 80},
                {field: 'city', title: '城市', width: 100},
                {field: 'experience', title: '积分', width: 80, sort: true},
                {fixed: 'right', title: '操作', width: 134, minWidth: 125, toolbar: '#barDemo'}
            ]],
            //skin: 'line', // 表格风格
            //even: true,
            page: true, // 是否显示分页
            limits: [5, 10, 15, 20, 30, 50],
            limit: 10 // 每页默认显示的数量
        });

        // 行事件监听
        table.on('tool(tableData)', function (obj) { // 双击 toolDouble
            let data = obj.data; // 获得当前行数据
            if (obj.event === 'edit') {
                // layer.msg("编辑事件被监听" + data.id)
                layer.open({
                    title: '编辑',
                    type: 2,
                    // shade: 0.6, // 遮罩透明度
                    area: ['60%','60%'],  //  弹窗大小
                    content: '04_登录页.html'
                });
                // 发送异步请求  获取数据 进行数据回显
            } else if (obj.event === 'delete') {
                layer.msg("删除事件被监听" + data.id)
                // 发送异步请求   删除数据
            }
        })
        // 表格头部事件监听
        table.on('toolbar(tableData)', function (obj) {
            let id = obj.config.id;
            let checkStatus = table.checkStatus(id);
            // let othis = lay(this);
            switch (obj.event) {
                case 'batchDelete':
                    let data = checkStatus.data; // []       user=>user.id
                    const ids =  data.map(user=>user.id)
                    if (ids.length==0){
                        layer.msg("请至少选择一条数据")
                        return
                    }
                    // 发送请求 删除数据
                    layer.msg(JSON.stringify(ids))
                    break;
                case 'add':
                   // layer.msg("添加用户信息")
                    //弹出模态窗
                    layer.open({
                        title: '新增',
                        type: 2,
                        anim: 2,
                        // shade: 0.6, // 遮罩透明度
                        area: ['60%','60%'],  //  弹窗大小
                        content: '04_登录页.html'
                    });
                    break;
            }
            ;
        });


    });


    // const students = [
    //     {
    //         name: 'tom1',
    //         age: 20,
    //         sex: '男'
    //     },
    //     {
    //         name: 'tom2',
    //         age: 20,
    //         sex: '男'
    //     },
    //     {
    //         name: 'tom3',
    //         age: 20,
    //         sex: '男'
    //     },
    //     {
    //         name: 'tom4',
    //         age: 20,
    //         sex: '男'
    //     }
    // ]
    // let tb = document.getElementById("tb");
    // // 遍历数组
    // students.forEach(student => {
    //     let tr = document.createElement("tr")
    //     //  向tr中追加td
    //     for (const key in student) {
    //         let tdEle = document.createElement("td")
    //         tdEle.innerText = student[key]
    //         tr.append(tdEle)
    //     }
    //     // 将tr添加到tb
    //     tb.append(tr)
    // })
    // const students2 = [
    //     {
    //         name: 'tom1',
    //         age: 20,
    //         sex: '男'
    //     },
    //     {
    //         name: 'tom2',
    //         age: 20,
    //         sex: '男'
    //     },
    //     {
    //         name: 'tom3',
    //         age: 20,
    //         sex: '男'
    //     },
    //     {
    //         name: 'tom4',
    //         age: 20,
    //         sex: '男'
    //     }
    // ]
    // //  清空 tb
    // tb.clear()
    // students2.forEach(student => {
    //     let tr = document.createElement("tr")
    //     //  向tr中追加td
    //     for (const key in student) {
    //         let tdEle = document.createElement("td")
    //         tdEle.innerText = student[key]
    //         tr.append(tdEle)
    //     }
    //     // 将tr添加到tb
    //     tb.append(tr)
    // })

</script>

</body>
</html>